<template>
  <div class="hello">
    <x-flow />
    <!-- <x-sign ref="sign" @confirm="confirm" :options="CanvasOption" />

    <a-button @click="save">save</a-button>
    <a-button @click="clear">clear</a-button> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, Ref, ref } from "vue";
import XFlow from "../blocks/flow";
import XSign from "../blocks/basic/sign";

export default defineComponent({
  setup() {
    const sign = ref();
    return {
      XFlow,
    };
  },
  name: "HelloWorld",
  components: {
    XFlow,
    // XSign,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      CanvasOption: {
        isDpr: false,
        lastWriteSpeed: 1,
        lastWriteWidth: 2,
        lineCap: "round",
        lineJoin: "round",
        canvasWidth: 800,
        canvasHeight: 300,
        isShowBorder: true,
        bgColor: "#fefefe",
        borderWidth: 1,
        borderColor: "#aaa",
        writeWidth: 5,
        maxWriteWidth: 30,
        minWriteWidth: 5,
      },
    };
  },
  methods: {
    // confirm(img: string | null) {
    //   console.log(img);
    // },
    // save() {
    //   this.sign.downloadSignImg();
    // },
    // clear() {
    //   this.sign.canvasClear();
    // },
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
